<script lang="ts">

export default {
    name: 'Person'
}

</script>

<script lang="ts" setup>

import {ref,computed} from 'vue'

let firstName = ref("張")
let lastName = ref("三")

// 这个fullName返回是一个响应式对象 但是只是可读的 不能修改 
// let fullName = computed(()=>{
//     return firstName.value.slice(0,1).toLocaleUpperCase + firstName.value.slice(1) + '--' + lastName
// })


//  不建议使用可写 建议只是可读属性
// let fullName = computed({
//     get(){
//     return firstName.value.slice(0,1).toLocaleUpperCase + firstName.value.slice(1) + '--' + lastName
//     },
//     set(){
//         fullName.value = "li-si"
//     }
// })

</script>
<template>
    <div class="person">
        姓: <input type="text" v-model="firstName"><br>
        <br>
        名: <input type="text" v-model="lastName"><br><br>
        全名: <span>{{firstName}}--{{lastName}}</span><br>
    </div>
</template>

<style>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0px 5px;
}
</style>